<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"> -->
    <!-- unsafe-inline 允许使用内联资源，例如内联 <script> 元素（javascript: URL）、内联事件处理器以及内联 <style> 元素。 -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'unsafe-inline'; script-src 'unsafe-inline'">
    <title>你好!</title>
  </head>
  <script type="text/javascript">
    function toggler() {
      const dom = document.getElementById('toggler')
      if (dom.innerText === 'show') {
        dom.innerText = ''
      } else {
        dom.innerText = 'show'
      }
    }
    // 监听别的窗口的消息事件
    window.addEventListener('message', (event) => {
      console.log(event, 'message')
    })
    function clickBack() {
      window.history.back()
    }
    // 给父窗口发送信息
    function sendMsgClick() {
      console.log('message click')
      window.opener.postMessage('i am from self message')
    }
  </script>
  <style type="text/css">
    .back {
      color: #666;
      cursor: pointer;
    }
    .back:hover {
      color: #333;
    }
    .toggler {
      margin-right: 25px;
    }
  </style>
  <body>
    <p class="back" onclick="clickBack()">《 返回</p>
    <p>自己的页面自己做主</p>
    <p>
      <span class="toggler" onclick="toggler()">toggler</span><span id="toggler"></span>
    </p>
    <p>
      <button onclick="sendMsgClick()">给父窗口发送信息</button>
    </p>
  </body>
</html>